/**
 *  添加两个分组: 一个 Camera_2  一个UI
 *
 *  所以游戏中存在3个相机,功能如下:
 *  Main Camera :
 *     只进行渲染Camera_2组,即sp_dst节点(其group设置为Camera_2),
 *     cullingMask 只勾选 Camera_2. 清除深度缓冲.
 *
 *  Camera_2 :
 *      用来渲染整个 default组
 *      cullingMask只勾选default,清除color buffer,
 *      关闭自动渲染(_enabled 设置成false),update进行手动渲染到相机targetTexture, 然后将此纹理给 sp_dst 使用.
 *
 *  UI Camera :
 *       只进行渲染 UI 组,
 *       cullingMask  只勾选 UI,且把depth调到最大(值越大，则摄像机越晚被渲染.),并且不清除color buffer.
 */

const MatType = {
    Blur:1,
    Rgb:2,
    Hsb:3
};

cc.Class({
    extends: cc.Component,

    properties: {
        camera: cc.Camera,
        camera_2: cc.Camera,

        sp_dst: cc.Sprite,
        sp_src: cc.Sprite,

        nd_scene:cc.Node,

        // prefabs
        pf_blurEffect:cc.Prefab,
        pf_rgbEffect:cc.Prefab,
        pf_hsbEffect:cc.Prefab,

        // tab toggles
        nd_toggleBlur:cc.Node,
        nd_toggleRgb:cc.Node,
        nd_toggleHsb:cc.Node,

    },

    ctor(){
        this.matType = -1;
        this.effectControl = null;
        this.nd_effectControl = null;
    },

    onLoad() {

        this.sp_dst.node.scaleY = -1;

        this._changeMatType(MatType.Rgb);
        this.nd_toggleRgb.getComponent(cc.Toggle).check();

        // camera_2 自动渲染到 纹理
        let rt = new cc.RenderTexture();
        rt.initWithSize(cc.visibleRect.width, cc.visibleRect.height);
        this.rt = rt;
        this.camera_2.targetTexture = rt;
        this.camera_2._enabled = false;
        this.frame = new cc.SpriteFrame(rt);
    },


    update(dt) {

        // update sp src
        this.sp_src.node.y += dt * 100;
        if (this.sp_src.node.y > 780) {
            this.sp_src.node.y = -780;
        }

        // render scene to texture
        this.camera_2.render(this.nd_scene);
        this.frame._refreshTexture(this.rt);
        this.sp_dst.spriteFrame = this.frame;
    },

    onTabChanged(event){
        if(event.node === this.nd_toggleBlur){
            this._changeMatType(MatType.Blur);
        }else if(event.node === this.nd_toggleRgb){
            this._changeMatType(MatType.Rgb);
        }else if(event.node === this.nd_toggleHsb){
            this._changeMatType(MatType.Hsb);
        }else{
            throw new Error(`unknow node :${event.node}`);
        }
    },

    _changeMatType(newType){
        if(this.matType === newType){
            return;
        }
        if(this.nd_effectControl){
            this.nd_effectControl.destroy();
            this.nd_effectControl = null;
        }

        this.matType = newType;

        switch (this.matType) {
            case MatType.Blur:
                let ndBlur = cc.instantiate(this.pf_blurEffect);
                ndBlur.setParent(this.node);
                this.effectControl = ndBlur.getComponent('blurEffect');
                this.effectControl.initWithDstSprite(this.sp_dst);
                this.nd_effectControl = ndBlur;
                break;
            case MatType.Rgb:
                let ndRgb = cc.instantiate(this.pf_rgbEffect);
                ndRgb.setParent(this.node);
                this.effectControl = ndRgb.getComponent('rgbEffect');
                this.effectControl.initWithDstSprite(this.sp_dst);
                this.nd_effectControl = ndRgb;
                break;
            case MatType.Hsb:
                let ndHsb = cc.instantiate(this.pf_hsbEffect);
                ndHsb.setParent(this.node);
                this.effectControl = ndHsb.getComponent('hsbEffect');
                this.effectControl.initWithDstSprite(this.sp_dst);
                this.nd_effectControl = ndHsb;
                break;
            default:
                throw new Error(`unknow matType:${this.matType}`);
        }
    },
    back_btnClicked(){
        cc.director.loadScene('entry/mainScene');
    },

});
